<template>
	<!-- 简单的文字列表 -->
	<view class="uni-padding-warp uni-common-mt uni-flex uni-column">
		<view v-for="item in listdata" class="uni-row uni-flex list-item" @click="onclick(item)">
			<!-- 标题内容 -->
			<view class="uni-flex" style="flex: 2; align-items: center; justify-content: flex-start;">
				<text class="age-content-title age-item-name">{{item.name}}</text>
			</view>
			<!-- 是否更新 -->
			<view class="uni-flex" style="align-items: center;" v-show="item.isnew">
				<text class="item-new">new</text>
			</view>
			<!-- 更新信息 -->
			<view class="uni-flex" style="flex: 1; align-items: center; justify-content: flex-end;">
				<text class="age-content-title">{{item.namefornew}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"agelist",
		emits:[
			"clicklistItem"
		],
		props:{
			listdata:{
				type: Array,
				default: [{"title":"测试数据", isupdate:true, updateInfo:"01:35 第10集"}]
			}
		},
		data() {
			return {
			}
		},
		methods: {
			// 使用$emit方法来触发这些自定义事件，并将数据作为参数传递给父组件
			onclick(item) {
				this.$emit("clicklistItem",item)
			}
		}
	}
</script>

<style>	
	
	.uni-common-mt {
		margin-top: 10rpx;
	}

	.list-item {
		border-bottom:1rpx solid  #686868;
		height: 80rpx;
		/* 鼠标指针设置为手型，表示可点击 */
		cursor: pointer;
		
		/* 点击的动画效果 */
		transition: background-color 0.3s;
	}
	
	.list-item:active {
		background-color: #686868;
	}
	
	.item-new {
		font-size: 20rpx;
		color: white;
		background-color: #e43d33;
		border-radius: 5rpx;
		/* 将line-height设置为与height相同的值，这样文字就会在元素中垂直居中 */
		height: 30rpx;
		line-height: 30rpx;
		width: 60rpx;
		text-align: center;
	}
	
	.age-item-name {
		white-space: nowrap; /* 禁止换行 */
		overflow: hidden;/*隐藏超出部分*/
		text-overflow: ellipsis; /*省略号*/
		max-width: 320rpx;
	}
</style>
